<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="<%=basePath%>statics/css/bootstrap-2.3.css">
<title>山西旅游网站</title>
</head>
<body>
<%-- <jsp:include page="/header.html"></jsp:include> --%>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<div class="row-fluid">
				<div class="span12">
				<div class="span4"></div>
				<div class="span4">
					<h3>华夏古文明-山西好风光----设计成图片</h3>
				</div>
				<div class="span4"></div>
				</div>
			</div>
			<div class="row-fluid">
				<div class="span1">
				</div>
				<div class="span10">
					<div class="navbar">
						<div class="navbar-inner">
							<div class="container-fluid">
								 <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">山西旅游网</a>
								<div class="nav-collapse collapse navbar-responsive-collapse">
									<ul class="nav">
										<li class="active">
											<a href="#">主页</a>
										</li>
										<li class="dropdown">
											 <a data-toggle="dropdown" class="dropdown-toggle" href="#">大好山西<strong class="caret"></strong></a>
											<ul class="dropdown-menu" id="citylistid">
												<li>
													<a href="#">太原市</a>
												</li>
												<li>
													<a href="#">长治市</a>
												</li>
												<li>
													<a href="#">大同市</a>
												</li>
												<li>
													<a href="#">忻州市</a>
												</li>
												<li>
													<a href="#">晋中市</a>
												</li>
												<li>
													<a href="#">更多城市</a>
												</li>
											</ul>
										</li>
										<li class="dropdown">
											 <a data-toggle="dropdown" class="dropdown-toggle" href="#">主要景点<strong class="caret"></strong></a>
											<ul class="dropdown-menu">
												<li>
													<a href="#">五台山</a>
												</li>
												<li>
													<a href="#">平遥古城</a>
												</li>
												<li>
													<a href="#">云冈石窟</a>
												</li>
												<li>
													<a href="#">皇城相府</a>
												</li>
												<li>
													<a href="#">乔家大院</a>
												</li>
												<li>
													<a href="#">更多景点</a>
												</li>
											</ul>
										</li>
										<li class="dropdown">
											 <a data-toggle="dropdown" class="dropdown-toggle" href="#">山水旅游<strong class="caret"></strong></a>
											<ul class="dropdown-menu">
												<li>
													<a href="#">山岳风光</a>
												</li>
												<li>
													<a href="#">河流水域</a>
												</li>
												<li>
													<a href="#">森林草甸</a>
												</li>
												<li>
													<a href="#">三晋名泉</a>
												</li>
												<li>
													<a href="#">关隘渡口</a>
												</li>
												<li>
													<a href="#">自然奇观</a>
												</li>
											</ul>
										</li>
										<li>
										</li>
										<li>
											<a href="#">读图之美</a>
										</li>
										<li>
											<a href="#">留言板</a>
										</li>
									</ul>
									<ul class="nav pull-right">
										
										<li>
											<a href="#">游客登录</a>
										</li>
										
									</ul>
								</div>
								
							</div>
							
						</div>
							<div class="carousel slide" id="carousel-339691" data-ride="carousel">
								<ol class="carousel-indicators">
									<li class="active" data-slide-to="0" data-target="#carousel-339691"></li>
									<li data-slide-to="1" data-target="#carousel-339691"></li>
									<li data-slide-to="2" data-target="#carousel-339691"></li>
									<li data-slide-to="3" data-target="#carousel-339691"></li>
									<li data-slide-to="4" data-target="#carousel-339691"></li>
								</ol>
								<div class="carousel-inner">
									<div class="item active">
										<img alt="" src="<%=basePath%>statics/images/inimg1da.jpg" />
										<div class="carousel-caption">
											<h4>棒球</h4>
											<p>棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。</p>
										</div>
									</div>
									<div class="item">
										<img alt="" src="<%=basePath%>statics/images/inimg2da.jpg" />
										<div class="carousel-caption">
											<h4>冲浪</h4>
											<p>
												冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
											</p>
										</div>
									</div>
									<div class="item">
										<img alt="" src="<%=basePath%>statics/images/inimg3da.jpg" />
										<div class="carousel-caption">
											<h4>冲浪</h4>
											<p>
												冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
											</p>
										</div>
									</div>
									<div class="item">
										<img alt="" src="<%=basePath%>statics/images/inimg4da.jpg" />
										<div class="carousel-caption">
											<h4>冲浪</h4>
											<p>
												冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
											</p>
										</div>
									</div>
									<div class="item">
										<img alt="" src="<%=basePath%>statics/images/inimg5da.jpg" />
										<div class="carousel-caption">
											<h4>冲浪</h4>
											<p>
												冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
											</p>
										</div>
									</div>
								</div>
								<a data-slide="prev" href="#carousel-339691" class="left carousel-control">‹</a> 
								<a data-slide="next" href="#carousel-339691" class="right carousel-control">›</a>
							</div>
						</div>
						
				</div>
				<div class="span1">
				</div>
			</div>
			
			<div class="row-fluid">
				<div class="span2">
				</div>
				<div class="span6">
					<center>
					Copyright 2018 Inc.All rights reserved. 旅游网 版权所有 晋ICP备xxxxx号-1
					</center>
				</div>
				<div class="span4">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
<div id="rrapp" v->
<tr>{{a}}</tr>
<tr  v-for="item in cityListInfo">
      {{item.id}}
</tr>

</div>
<script src="<%=basePath%>statics/libs/jquery.min.js"></script>
<script src="<%=basePath%>statics/libs/vue.min.js"></script>
<script src="<%=basePath%>statics/libs/router.js"></script>
<script src="<%=basePath%>statics/libs/bootstrap.min.js"></script>
<script src="<%=basePath%>statics/plugins/layer/layer.js"></script>
<script src="<%=basePath%>statics/libs/app.js"></script>
<script>
$(function(){
    $('#carousel-339691').carousel({
      interval: 3000
    });
    vm.created();
});
$.ajax({ 
    type : "get", 
    url : "<%=basePath%>api/tcity/list", 
    data : "", 
    async : false, 
    success : function(data){ 
      data = eval("(" + data + ")"); 
      console.log(data);
/*       $.each(dataObj, function(index, item){
    	  console.log(item.id);
      } */
    } 
    }); 
<%-- var vm = new Vue({
	el:'#div',
	data:{
		cityList:{}
	},
	method:{
		created: function () { //created方法，页面初始调用  
		      var url = "<%=basePath%>api/tcity/list";
		      this.$http.get(url).then(function (data) {  //ajax请求封装
		        var json = data.bodyText;
		        var usedData= JSON.parse(json);
		        //我的json数据参考下面
		        console.info(usedData);
		        this.cityListInfo = usedData["cityList"]; //把获取到的数据赋给cityList
		      }, function (response) {   //返回失败方法调用，暂不处理
		        console.info(response);
		      })
		    }
		    created:function(){
		    	/* $.getJSON("api/tcity/list?_"+$.now(), function(r){
					vm.cityList = r.cityList;
				}); */
		    	 $.getJSON("<%=basePath%>api/tcity/list",function(result){
		    		 alert("JSON Data: " + json.cityList[3].id);
		    		  });
		    	alert("132");
		    }
	}
}); --%>

var vm = new Vue({
	
	el:'#rrapp',
  data: {
    a: 1,
    cityListInfo:[]
  },
  methods: {  created: function () {
	    // `this` 指向 vm 实例
	    console.log('a is: ' + this.a)
	    $.getJSON("<%=basePath%>api/tcity/list?_"+$.now(), function(result){
			vm.cityListInfo = result.cityList;
			
			console.log(result);
		});
	    
	  }}

})
</script>
